<!DOCTYPE html>
<html>

<head>
    <title>营销中心</title>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_950377_g4e7evbmoq.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/flexible.js"></script>
    <style>
        body{padding-bottom: 1rem;}
        .header .middle{font-weight:700;font-size:.36rem}
        .bdr-b::after{border-bottom: 1px dashed #e6e6e6;}
.coupon_box{padding:.2rem}
.coupon_list{color:#999}
.coupon_list a{color:#999}
.coupon_list li{position:relative;padding:.2rem;background:#fff;border-radius:.1rem;margin-bottom:.2rem;overflow:hidden}
.coupon_list li.invalid .a3 .right span{background:none;color: #000;border: none;}
.coupon_list li.invalid .a1 .left{color: #000;}
.coupon_list li.invalid .a2 .left{color: #999;}
.coupon_list li .a1,.coupon_list li .a3{display:flex;justify-content:space-between;align-items:center}
.coupon_list li .a1 .left{font-size:.36rem;font-weight:700;color: #148ceb;}
.coupon_list li .a1 .right{font-size:.24rem;}
.coupon_list li .a2{font-size:.2rem;position:relative;padding:.1rem 0}
.coupon_list li .a2 .left{color: #148ceb;}
.coupon_list li .a2 .left em{color:#000}
.coupon_list li .a3{position:relative;line-height:.52rem;padding-top:.2rem;font-size:.24rem}
.coupon_list li .a3::before{position:absolute;content:'';width:.4rem;height:.4rem;background-color:#f9f9f9;border-radius:50%;left:-.4rem;top:-.2rem}
.coupon_list li .a3::after{position:absolute;content:'';width:.4rem;height:.4rem;background-color:#f9f9f9;border-radius:50%;right:-.4rem;top:-.2rem}
.coupon_list li .a3 .right span{padding:.1rem .15rem;color:#fff;border-radius:2px;font-size:.24rem;border: #fa1c1c solid 1px;color: #fa1c1c;}
.footer{position: fixed;bottom: 0;left: 0;right: 0;width: 100%;display: flex;align-items: center; z-index: 15;}
.footer .btn_default{ flex: 1; background: #148ceb;border-radius:0;line-height: 1rem;border:none;}
    </style>
</head>

<body class="bgf9f9f9">
    <div class="header">
        <div class="left"><i class="iconfont icon-fanhui1" onClick="javascript:history.back(-1)"></i></div>
        <!-- <div class="middle">标题</div> -->
        <div class="middle">优惠券</div>
        <div class="right"></div>
    </div>
      <div class="tabbox">
          <ul class="tab">
              <li>
                  <a href="#" class="on">全部</a></li>
                  <li>  <a href="#">进行中</a></li>
                    <li>  <a href="#">已结束</a>
              </li>
          </ul>
      </div>
      <div class="coupon_box">
          <ul class="coupon_list">
                <a href="yhq_detail.html">
                        <li>
                            <div class="a1">
                                  <p class="left">满100减10</p>
                                  <p class="right">2018.12.7-2018.12.24</p>
                            </div>
                            <div class="a2 bdr-b">
                                  <p class="left">150张<em>/剩50张</em></p>
                                  <p class="right">周六、周日不可以用</p>
                            </div>
                            <div class="a3">
                                <p class="left">创建于2018.12.6</p>
                                <p class="right"><span>结束活动</span></p>
                            </div>
                        </li>
                      </a>
              <a href="#">
              <li class="invalid">
                  <div class="a1">
                        <p class="left">满100减10</p>
                        <p class="right">2018.12.7-2018.12.24</p>
                  </div>
                  <div class="a2 bdr-b">
                        <p class="left">150张<em>/剩50张</em></p>
                        <p class="right">周六、周日不可以用</p>
                  </div>
                  <div class="a3">
                      <p class="left">创建于2018.12.6</p>
                      <p class="right"><span>已经结束</span></p>
                  </div>
              </li>
            </a>
            <a href="#">
                    <li>
                        <div class="a1">
                              <p class="left">满100减10</p>
                              <p class="right">领取后5天内有效</p>
                        </div>
                        <div class="a2 bdr-b">
                              <p class="left">150张<em>/剩50张</em></p>
                              <p class="right">周六、周日不可以用</p>
                        </div>
                        <div class="a3">
                            <p class="left">创建于2018.12.6</p>
                            <p class="right"><span>结束活动</span></p>
                        </div>
                    </li>
                  </a>
          </ul>
          <div class="empty">
              <p><img src="images/coupon.png"></p>
              <p>您还没有添加任何优惠券~</p>
          </div>
      </div>
      <div class="footer">
            <a class="btn_default" href="yhq_add.html">+新增满减券</a>
        </div>
</body>
</html>